<template>
	<view class="back-top" :animation="animationData" @click="tapTop()">
		<slot>
			<image src="./img/topimg.png" mode=""></image>
		</slot>
	</view>
</template>

<script>
	//创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的export方法导出动画数据传递给组件的animation属性。
	let animation = uni.createAnimation({
		timingFunction: 'linear',
	})
	export default{
		props:{
			scrollTop: {
				type: Number,
				default () {
					return []
				}
			}
		},
		data(){
			return{
				animationData:{}
			}
		},
		watch: {
			scrollTop(newVal, oldVal) {//监听scrollTop的变化
				if (newVal < 100) {
					//淡出
					animation.opacity(0).step({duration:800})
					this.animationData = animation.export()
				} else {
					//淡入
					animation.opacity(1).step({duration:800}) 
					this.animationData = animation.export()
				}
			}
		},
		methods:{
			//滚动到顶部
			tapTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 500
				});
			}
		}
		
		
		
		
	}	
</script>

<style>
	.back-top{
		display: flex;
		position: fixed;
		right: 20rpx;
		bottom: 10%;
		width: 100rpx;
		height: 100rpx;
		border: 4rpx solid #007AFF ;
		border-radius: 50%;
		padding: 15rpx;
		box-sizing: border-box;
		opacity: 0;
	}
	.back-top image{width: 100%;height: 100%;}
	
	
</style>
